<template>
    <div style="overflow-y: auto;">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in list[msg]" :key="item.id">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" :src="'./static/images/commentUser.png'">
                    <div class="mui-media-body">
                        <p class='mui-ellipsis comT'>
                            <span class="name">{{item.name}}</span>
                            <small class="time">{{item.time}}</small>
                        </p>
                        <p class='mui-ellipsis star'>
                            <el-rate v-model="item.value" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
                            <span class="comment-block" v-if="item.value >= 4">超赞</span>
                        </p>
                        <p class='mui-ellipsis' v-if="item.txt">{{item.txt}}</p>
                        <div class="answer" v-if="item.answer">{{item.answer}}</div>
                        <div v-if="item.img">
                            <img class="fanImg" v-for="(img, index) in item.img" :src="img" :key="index">
                        </div>
                    </div>
                </a>
            </li>
        </ul>        
    </div>
</template>

<script>
export default {
    data() {
        return {
            List1: [{
                id: 1,
                name: '匿名用户',
                time: '2019-04-23',
                value: 5,
                txt: '这道，孜然牛肉，辣度适中，适合我这种怕辣的人，配的榨菜丝也非常好吃，煲仔酱味道好，适合无限回购',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
                img: ['./static/images/fan1.jpg']
            }, {
                id: 2,
                name: '匿名用户',
                time: '2019-03-26',
                value: 5,
                txt: '说好的风味鸡杂，原来有酸豆角和剁辣椒的，现在只剩鸡杂了吗？',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
                img: ['./static/images/fan2.jpg']
            }, {
                id: 3,
                name: '匿名用户',
                time: '2019-03-26',
                value: 5,
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
                img: ['./static/images/fan3-1.jpg', './static/images/fan3-2.jpg']
            }, {
                id: 4,
                name: '九****人',
                time: '2019-03-21',
                value: 5,
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
                img: ['./static/images/fan4.jpg']
            }, {
                id: 5,
                name: 'l************8',
                time: '2019-03-18',
                value: 5,
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
                img: ['./static/images/fan5.jpg']
            }],
            List2: [{
                id: 1,
                name: '4*******8',
                time: '2019-05-08',
                value: 5,
                txt: '百吃不厌，非常喜欢',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }, {
                id: 2,
                name: 'b*********4',
                time: '2019-05-08',
                value: 5,
                txt: '服务好，味道好',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }, {
                id: 3,
                name: '匿名用户',
                time: '2019-05-05',
                value: 5,
                txt: '6666666666',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }, {
                id: 4,
                name: 'e*********6',
                time: '2019-05-05',
                value: 5,
                txt: '感觉好不错，下次再来',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }, {
                id: 5,
                name: 'e*********6',
                time: '2019-05-05',
                value: 5,
                txt: '感觉好不错，下次再来',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }],
            List3: [{
                id: 1,
                name: '4*******8',
                time: '2019-05-08',
                value: 5,
                txt: '百吃不厌，非常喜欢',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }, {
                id: 2,
                name: 'b*******4',
                time: '2019-05-08',
                value: 5,
                txt: '服务好，味道好',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }, {
                id: 3,
                name: 'e*********6',
                time: '2019-05-05',
                value: 5,
                txt: '感觉好不错，下次再来',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }, {
                id: 4,
                name: '匿名用户',
                time: '2019-05-05',
                value: 5,
                txt: '666666666',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }, {
                id: 5,
                name: 'e*********6',
                time: '2019-05-05',
                value: 5,
                txt: '感觉好不错，下次再来',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }],
            List4: [{
                id: 1,
                name: '匿名用户',
                time: '2019-04-29',
                value: 1,
                txt: '饭都黑了，咸蛋颜色黑的，青菜没洗干净，吃了今天一下午都反胃！',
                answer: '商家回复：亲爱的顾客，青菜我们都经过几片的漂洗您大可放心食用，有不足之处我们会加强改进.谢谢理解和支持',
            }, {
                id: 2,
                name: '匿名用户',
                time: '2019-04-27',
                value: 2,
                txt: '分量变少了',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }, {
                id: 3,
                name: '匿名用户',
                time: '2019-04-27',
                value: 1,
                txt: '都说了让帮忙装一点小菜，结果什么都没有',
                answer: '商家回复：亲爱的顾客，非常抱歉影响您的用餐，感谢您的提醒与反馈，您反馈的问题我们会在下次服务中改进，期待您再次的光临！',
            }, {
                id: 4,
                name: '3*******4',
                time: '2019-04-27',
                value: 1,
                txt: '订三份饭 只给一套餐具 煲仔汁和榨菜也只有一份',
                answer: '商家回复：亲爱的顾客，非常抱歉影响您的用餐，感谢您的提醒与反馈，您反馈的问题我们会在下次服务中改进，期待您再次的光临！',
            }, {
                id: 5,
                name: '匿名用户',
                time: '2019-05-05',
                value: 1,
                txt: '少了饮料',
                answer: '商家回复：亲爱的顾客，非常抱歉影响您的用餐，感谢您的提醒与反馈，您反馈的问题我们会在下次服务中改进，期待您再次的光临！',
            }],
            List5: [{
                id: 1,
                name: '匿名用户',
                time: '2019-04-23',
                value: 5,
                txt: '这道，孜然牛肉，辣度适中，适合我这种怕辣的人，配的榨菜丝也非常好吃，煲仔酱味道好，适合无限回购',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
                img: ['./static/images/fan1.jpg']
            }, {
                id: 2,
                name: '匿名用户',
                time: '2019-03-26',
                value: 5,
                txt: '说好的风味鸡杂，原来有酸豆角和剁辣椒的，现在只剩鸡杂了吗？',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
                img: ['./static/images/fan2.jpg']
            }, {
                id: 3,
                name: '匿名用户',
                time: '2019-03-26',
                value: 5,
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
                img: ['./static/images/fan3-1.jpg', './static/images/fan3-2.jpg']
            }, {
                id: 4,
                name: '九****人',
                time: '2019-03-21',
                value: 5,
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
                img: ['./static/images/fan4.jpg']
            }, {
                id: 5,
                name: 'l************8',
                time: '2019-03-18',
                value: 5,
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
                img: ['./static/images/fan5.jpg']
            }],
            List6: [{
                id: 1,
                name: '4*******8',
                time: '2019-05-08',
                value: 5,
                txt: '百吃不厌，非常喜欢',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }, {
                id: 2,
                name: '4*******8',
                time: '2019-05-08',
                value: 5,
                txt: '百吃不厌，非常喜欢',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }, {
                id: 3,
                name: 'e*********6',
                time: '2019-05-05',
                value: 5,
                txt: '感觉好不错，下次再来',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }, {
                id: 4,
                name: 'c*********4',
                time: '2019-05-05',
                value: 4,
                txt: '还是可以滴',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }, {
                id: 5,
                name: '4*********8',
                time: '2019-05-02',
                value: 5,
                txt: '很好吃，每次必点的腊味双拼',
                answer: '商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务，我们会继续努力，为您提供更好的服务。祝您生活愉快！',
            }],
            list: {}
        }
    },
    props: ['msg'],
    mounted() {
        this.list = {1: this.List1, 2: this.List2, 3: this.List3, 4: this.List4, 5: this.List5, 6: this.List6}
    },
}
</script>

<style scoped>
    /* tab-content */
    .mui-media-object {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .mui-ellipsis {
        display: flex;
        align-items: center;
    }
    .comT {
        justify-content: space-between
    }
    .name {
        color: #333;
        margin-right: 6px;
        font-size: 13px;
    }
    .time {
        font-size: 11px;
        color: #999;
    }
    .star {
        margin-top: 3px;
    }
    .answer {
        position: relative;
        margin: 10px 0;
        padding: 10px;
        background: #f3f3f3;
        border-radius: 2px;
    }
    .answer::after {
        content: " ";
        position: absolute;
        bottom: 100%;
        left: 15px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 8px 8px;
        border-color: transparent transparent #f3f3f3;
    }
    .fanImg {
        margin: 4px 5px 12px 0;
        width: 140px;
        height: 140px;
    }
    .comment-block {
        margin-left: 4px;
        font-size: 11px;
        color: rgb(255, 96, 0);
    }
</style>
